<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast } from "@/utils";
import NavBar from "../../components/NavBar.vue";

/* 参数列表 */
let params = ref({
	/* 用户ID */
	userId: null,
	/* 输入框手机号或者昵称关键字 */
	keyword: "",
	/* 每页页码 */
	pageNum: 1,
	/* 每页显示记录数 */
	pageSize: 10,
	/* 总共多少条数据 */
	pageCount: 1,
})
/* 登录的用户信息 */
let userInfo = ref({});
/* 会员列表 */
let blackList = ref([]);
const state = reactive({
	navHeight: 0,
})

onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	userInfo.value = user.userInfo;
	params.value.userId = userInfo.value.id;
	/* 获取黑名单用户列表 */
	getBlackList();
})

/* 上拉加载 */
onReachBottom(() => {
	params.value.pageNum++;
	if (params.value.pageNum < params.value.pageCount + 1 && (params.value.pageCount != 1)) {
		/* 获取黑名单用户列表 */
		getBlackList();
	} else {
		/* 没有数据了 */
	}
})

/* 设备型号搜索框搜索按钮点击事件 */
const handleSearch = () => {
	if (!params.value.keyword) return Toast("请先输入输入手机号或者昵称");
	blackList.value = [];
	/* 获取黑名单用户列表 */
	getBlackList();
}

/* 复制按钮点击事件 */
const handleCopy = (value, msg = "手机号") => {
	uni.setClipboardData({
		data: value,
		success: () => {
			Toast(`${msg}复制成功`);
		},
		fail: () => {
			Toast(`${msg}复制失败`);
		}
	})
}

/* 移除选中的黑名单用户 */
const handleRemoveBlacklist = (item, index) => {
	request({
		url: `${ApiUrl.removeBlackList}`,
		method: "post",
		data: {
			userId: params.value.userId,
			memberId: item.id
		}
	}).then(res => {
		if (res.code === 200) {
			Toast("移除成功");
			params.value.pageNum = 1;
			blackList.value = [];
			/* 获取黑名单用户列表 */
			getBlackList();
		}
	})
}

/* 获取黑名单用户列表 */
const getBlackList = () => {
	request({
		url: `${ApiUrl.getBlackList}`,
		method: "post",
		data: {
			...params.value
		}
	}).then(res => {
		if (res.code === 200) {
			blackList.value = blackList.value.concat(res.data.list);
			params.value.pageCount = res.data.pages;
		}
	})
}

/* 监听输入手机号或者会员昵称输入框 */
watch(() => params.value.keyword, (val) => {
	if (!val) {
		params.value.pageNum = 1;
		blackList.value = [];
		/* 获取黑名单用户列表 */
		getBlackList();
	}
})
</script>

<template>
	<view class="blacklist_wrap">
		<NavBar v-model:navHeight="state.navHeight">
		  <template v-slot:center>
		    <view class="search">
		      <view class="input">
		        <image mode="widthFix" class="icon" src="/static/image/navbar/search.png" @click="handleSearch"/>
		        <input v-model.trim="params.keyword" placeholder="输入手机号或者昵称" />
		      </view>
		    </view>
		  </template>
		</NavBar>
		<view v-if="blackList.length > 0" class="black_list">
			<view class="black_item" v-for="(item, index) in blackList" :key="item.id">
				<image class="avatar" :src="`${ApiUrl.ImageUrl}/${item.avatar}`" mode="aspectFill"></image>
				<view class="content">
					<view class="title">{{ item.nickname }}</view>
					<view class="user_id">
						<text>手机号：</text>
						<text>{{ item.phone }}</text>
						<text @click="handleCopy(item.phone)">复制</text>
					</view>
					<view class="time">
						<text>注册时间：</text>
						<text>{{ item.createTime }}</text>
					</view>
					<view class="time">
						<text>最近游玩：</text>
						<text>{{ item.lastLoginTime }}</text>
					</view>
				</view>
				<view class="btn_remove" @click="handleRemoveBlacklist(item, index)">移除</view>
			</view>
		</view>
		<view v-else class="no_data">
			<image src="/static/image/bg_empty.png"></image>
			<text>没有记录哦～！！</text>
		</view>
	</view>
</template>

<style lang="scss">
	.blacklist_wrap {
		padding-top: calc(v-bind('state.navHeight') * 1px);
		background: #F8F9FB;
		box-sizing: border-box;
		padding-bottom: 24rpx;
		min-height: 100vh;
		.m-nav {
			.nav {
				.center {
					left: unset !important;
					transform: translate(10%, -50%) !important;
					.search {
						width: 420rpx;
						.input {
							width: 420rpx !important;
							input {
								flex: 1;
							}
						}
					}
				}
			}
		}
		.black_list {
			.black_item {
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 32rpx 20rpx;
				margin: 24rpx auto 0;
				display: flex;
				align-items: center;
				.avatar {
					flex-shrink: 0;
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}
				.content {
					flex: 1;
					margin-right: 24rpx;
					.title {
						font-weight: 500;
						font-size: 36rpx;
						line-height: 48rpx;
						color: #141414;
					}
					.user_id {
						display: flex;
						align-items: center;
						margin: 16rpx 0 0;
						text {
							font-size: 24rpx;
							line-height: 36rpx;
							color: #969699;
							&:nth-of-type(2) {
								color: #303030;
							}
							&:nth-of-type(3) {
								color: #FF9832;
								margin-left: 32rpx;
							}
						}
					}
					.time {
						display: flex;
						align-items: center;
						margin-top: 12rpx;
						text {
							font-size: 24rpx;
							line-height: 36rpx;
							color: #969699;
							&:nth-of-type(2) {
								color: #303030;
							}
						}
					}
				}
				.btn_remove {
					width: 102rpx;
					height: 48rpx;
					background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
					border-radius: 40rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.no_data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 226rpx;
			image {
				width: 392rpx;
				height: 392rpx;
			}
			text {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #CFCFD1;
				margin-top: 4rpx;
			}
		}
	}
</style>